<template>
  <div id="wrap">
    <div class="par">
    <h1>setup 语法糖支持ts写法</h1>
    <p>{{ userInfo.username }}</p>
    <p>{{ userInfo.sex }}</p>
    <p>{{ userInfo.age }}</p>
    <p>{{ userInfo2.username }}</p>
    <p>{{ userInfo2.sex }}</p>
    <p>{{ userInfo2.age }}</p>
    <p>{{ num }}</p>
    <p>{{ data.username }}</p>
    <p>{{ stu }}</p>
    <button @click="add">修改</button>
    <stueees />
    </div>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'ComponentName2',
}
</script>

<script lang="ts" setup>
import { ref, type Ref,h } from "vue";
import stueees from "./components/stueees.vue";
interface IUser{
    username:string
    sex:string
    age:number
}
// const userInfo=ref<IUser>({
//     username:'小明',
//     sex:'男',
//     age:18
// })
// const userInfo2=ref<IUser>({
//     username:'小红',
//     sex:'女',
//     age:16
// })
// let userInfo:Ref<IUser>=ref({
//     username:'小明',
//     sex:'男',
//     age:18
// })
// let userInfo2:Ref<IUser>=ref({
//     username:'小红',
//     sex:'女',
//     age:16
// })
let num:Ref<number>
// num=ref(123)
function userInfo3():Ref<IUser>{
    const userInfo4=ref<IUser>({
        username:'小行',
        sex:'男',
        age:20
    })
    return userInfo4
}
const data=userInfo3()
const userInfo5:Ref<number|null>=ref(null)
if(userInfo5.value){
    console.log(userInfo5.value);
}
let stu='不能修改'
const add=()=>{
    stu='可以修改'
    // data.value.username='小鬼'
}
</script>

<style lang='scss'>
@use '@/assets/common.scss';
#wrap{
    width: 100%;
    height: 100%;
    text-align: center;
    h1{
        color: white;
    }

}
// @import url('@/assets/common.scss');
// @import '@/assets/common.scss'
</style>
